<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>CSS Layout</title>
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="stylesheet" href="./index.css">
</head>
<body>
  <header>
    <img id="logo" src="logo.png" >
    <h1>CSS Layout</h1>
    <p>
      <a target="_blank" href="https://github.com/xiaoyureed">xiaoyureed@gayhub</a>
    </p>
  </header>
  <div class="demo1">
    <h1>display属性</h1>
    <p>对于大多数元素它们的默认值通常是 block 或 inline 。一个 block 元素通常被叫做块级元素。
      一个 inline 元素通常被叫做行内元素</p>

    <h2>block</h2>
    <p>div 是一个标准的块级元素。一个块级元素会新开始一行并且尽可能撑满容器。
      其他常用的块级元素包括 p 、 form 和HTML5中的新元素： header 、 footer 、 section 等等。</p>

    <h2>inline</h2>
    <span>span 是一个标准的行内元素, a 元素是最常用的行内元素;</span><span style="color: blue;">这里
      没有另提一行</span>
    <p>在哪里用到呢: 可以把有特定语义的元素改成行内元素。常见的例子是：把 li 元素修改成 inline，制作
      成水平菜单。</p>
    <ul>
      <li style="display: inline;">li1</li>
      <li style="display: inline;">li2</li>
      <li style="display: inline;">li3</li>
    </ul>

    <h2>none</h2>
    <p>另一个常用的display值是 none 。一些特殊元素的默认 display 值是它，例如 script 。
      display:none 通常被 JavaScript 用来在不删除元素的情况下隐藏或显示元素。</p>
    <p>它和 visibility 属性不一样。把 display 设置成 none 元素不会占据它本来应该显示的空间，但是设
      置成 visibility: hidden; 还会占据空间。</p>
    <p style="display: none;">我不会显示, 而且不会占据位置</p>
    <p style="visibility: hidden;">我不会显示, 但是会占据位置</p>
    <p>上一个元素占据了一行位置</p>

    <h2>inline-block</h2>
    <p>inline-block 还是block, 但是具备inline的特性, 需要
      做些<a href="https://blog.mozilla.org/webdev/2009/02/20/cross-browser-inline-block/">工作</a>
      让ie6/7支持inline-block;
    </p>
    <p>这里有个使用inline-block来布局的 demo: <a href="./inline-block-layout.html">link</a></p>
    <p>创建很多网格来铺满浏览器, 可以使用float或者 display:inline-block, 但是后者更为简单🍳, 下面是这两种实现方式:</p>
    <div style="border: 1px solid black;" class="use-float">
      <div style="border: 1px solid green;width: 200px; height: 100px; margin: 5px;" class="box">box1: 我使用的float, 浮起来了</div>
      <div style="border: 1px solid green;width: 200px; height: 100px; margin: 5px;" class="box">box2: 我使用的float, 浮起来了</div>
      <div style="border: 1px solid green;width: 200px; height: 100px; margin: 5px;" class="box">box3: 我使用的float, 浮起来了</div>
      <div style="border: 1px solid green;width: 200px; height: 100px; margin: 5px;" class="box">box4: 我使用的float, 浮起来了</div>
      <div style="border: 1px solid green;width: 200px; height: 100px; margin: 5px;" class="box">box5: 我使用的float, 浮起来了</div>
      <div style="border: 1px solid green;width: 200px; height: 100px; margin: 5px;" class="box">box6: 我使用的float, 浮起来了</div>
      <div style="border: 1px solid green;width: 200px; height: 100px; margin: 5px;" class="box">box7: 我使用的float, 浮起来了</div>
      <div style="border: 1px solid green;width: 200px; height: 100px; margin: 5px;" class="box">box8: 我使用的float, 浮起来了</div>
      <div style="border: 1px solid green;width: 200px; height: 100px; margin: 5px;" class="box">box9: 我使用的float, 浮起来了</div>
      <div style="border: 1px solid green;width: 200px; height: 100px; margin: 5px;" class="box">box10: 我使用的float, 浮起来了</div>
      <div style="border: 1px solid green;width: 200px; height: 100px; margin: 5px;" class="box">box11: 我使用的float, 浮起来了</div>
      <div style="border: 1px solid green; margin: 5px;" class="after-box">我在使用 clear，所以我不会浮动到上面那堆盒子的旁边。隔断了前
        面元素的浮动效果(防止对后面元素造成影响)</div>
    </div>
    <div style="border: 1px solid black; margin-top: 10px;" class="use-inline-block">
        <div style="border: 1px solid green;width: 200px; height: 100px; margin: 5px;" class="box2">box1: 我使用的float, 浮起来了</div>
        <div style="border: 1px solid green;width: 200px; height: 100px; margin: 5px;" class="box2">box2: 我使用的float, 浮起来了</div>
        <div style="border: 1px solid green;width: 200px; height: 100px; margin: 5px;" class="box2">box3: 我使用的float, 浮起来了</div>
        <div style="border: 1px solid green;width: 200px; height: 100px; margin: 5px;" class="box2">box4: 我使用的float, 浮起来了</div>
        <div style="border: 1px solid green;width: 200px; height: 100px; margin: 5px;" class="box2">box5: 我使用的float, 浮起来了</div>
        <div style="border: 1px solid green;width: 200px; height: 100px; margin: 5px;" class="box2">box6: 我使用的float, 浮起来了</div>
        <div style="border: 1px solid green;width: 200px; height: 100px; margin: 5px;" class="box2">box7: 我使用的float, 浮起来了</div>
        <div style="border: 1px solid green;width: 200px; height: 100px; margin: 5px;" class="box2">box8: 我使用的float, 浮起来了</div>
        <div style="border: 1px solid green;width: 200px; height: 100px; margin: 5px;" class="box2">box9: 我使用的float, 浮起来了</div>
        <div style="border: 1px solid green;width: 200px; height: 100px; margin: 5px;" class="box2">box10: 我使用的float, 浮起来了</div>
        <div style="border: 1px solid green;width: 200px; height: 100px; margin: 5px;" class="box2">box11: 我使用的float, 浮起来了</div>
    </div>

    <h2>flex "松紧带布局"</h2>
    <p>新的 flexbox 布局模式被用来重新定义CSS中的布局方式, 特性强大, 容易使用, 但是不同浏览器貌似支持的标准不一样</p>
    <p>同样, 将前面的布局通过display: flex 实现一遍: <a href="./flexbox-layout.html">link</a></p>
    <p> Flexbox 的居中布局</p>
    <div style="border: 1px solid black; max-width: 700px;" class="flex-center">
      <div style="border: 2px solid green;">CSS里总算是有了一种简单的垂直居中布局的方法了</div>
    </div>
  </div>
  <div class="demo2">
    <h1>水平居中</h1>

    <h2>margin: auto;</h2>
    <div class="one"><p>设置块级元素的 width 可以防止它从左到右撑满整个容器。
      然后你就可以设置左右外边距为 auto 来使其水平居中。
      元素会占据你所指定的宽度，然后剩余的宽度会一分为二成为左右外边距。
      唯一的问题是，如果浏览器窗口太窄(当浏览器窗口比元素的宽度还要窄时)，浏览器会显示一个水平滚动条来容
      纳页面。下面来借助 "max-width"改进
    </p></div>

    <h2>max-width</h2>
    <div class="two"><p>使用 max-width 替代 width 可以使浏览器更好地处理小窗口的情况。这点在移动设
      备上显得尤为重要</p></div>

    <h2>盒子模型  box-sizing: border-box;</h2>
    <p>默认盒子模型 元素视觉上的宽度=实际宽度+padding+(border-width属性), 看看默认盒子模型的例子</p>
    <div class="three">我没有padding和border-width, 所以小一些</div>
    <div class="four">我有padding和border-width, 元素"被撑大了", 但其实width都是一样的</div>
    <p>box-sizing: border-box;这样的元素的内边距和边框不再会增加它的宽度</p>
    <div class="five">一样的大小(凑字数~凑字数~凑字数凑字数凑字数凑字数凑字数凑字数凑字数凑字数凑字
      数凑字数凑字数凑字数凑字数凑字数凑字数凑字数凑字数凑字数凑字数凑字数凑字数)</div>
    <div class="six">一样的大小, 现在 增加padding和border-width只能往里面挤挤自个儿了</div>
    <p>想要页面上所有的元素都有如此表现, 可以这么做(使用 -webkit- 和 -moz- 前缀。这可以启用特定浏览
      器实验中的特性。同时记住它是支持IE8+的)</p>
    <code>* {
        -webkit-box-sizing: border-box;
           -moz-box-sizing: border-box;
                box-sizing: border-box;
      }</code>
  </div>
  <div class="demo3">
    <h1>position属性</h1>
    这个属性忒难记...😂
    它有一大堆的值，名字还都特抽象

    <h2>static</h2>
    <div class="static">static 是默认值。任意 position: static; 的元素不会被特殊的定位。其他值
      表示它被“positioned”。一个“positioned”元素是指 position 值不是 static 的元素。</div>

    <h2>relative</h2>
    <div class="relative1">relative 表现的和 static 一样，除非你添加了一些额外的属性。</div>
    <div class="relative2">在一个相对定位（position属性的值为relative）的元素上设
      置 top 、 right 、 bottom 和 left 属性会使其偏离其正常位置。
      其他的元素(不管是不是positioned元素)的位置则不会受该元素的影响发生位置改变。</div>

    <h2>fixed</h2>
    <p>demo见右下角↘, 一个固定定位元素不会保留它原本在页面应有的空隙（脱离文档流）。</p>
    <div class="fixed">一个固定定位（position属性的值为fixed）元素会相对于视窗来定位，这意味着即
      便页面滚动，它还是会停留在相同的位置。和 relative 一样， top 、 right 、 bottom 和 left 属性
      都可用</div>
    <p>移动设备对fixed支持不好, 解决方案: <a href="http://bradfrost.com/blog/mobile/fixed-position/">link</a></p>

    <h2>absolute</h2>
    <p style="max-width: 900px;">absolute 是最棘手的position值。 
      absolute 与 fixed 的表现类似，但是它不是相对于视窗而是相对于最近的“positioned”祖先元素。
      如果绝对定位（position属性的值为absolute）的元素没有“positioned”祖先元素，
      那么它是相对于文档的 body 元素，并且它会随着页面滚动而移动。
    </p>
    <div class="absolute-relative"><p>
        这个元素是相对定位的。如果它是 position: static; ，那么它的绝对定位子元素会跳过它直
        接相对于body元素定位。
      </p>
      <div class="absolute">这个元素是绝对定位的。它相对于它的positioned的父元素定位。</div>
    </div>
    <div style="border: 1px solid green; margin: 20px 400px 0 0;"><!-- margin只有三个值: 上 左右 下 -->
      <p>我是默认没有positioned (static)的father元素, 我的son会跳出, 相对于body元素定位, 见右上角↗</p>
      <div class="absolute">这个元素是绝对定位的。father不是positionded元素, 跳出来直接相对于body定位。</div>
    </div>
    <p>看看另一个position布局的demo: <a href="./position-layout.html">link</a></p>
  </div>
  <div class="demo4">
    <h1>float</h1>
    <p>Float 可用于实现文字环绕图片</p>

    <h2>float实现文字环绕效果</h2>
    <div style="max-width: 500px;border: 1px solid green; margin-top: 20px;">
      <img class="image2" src="./timg.jpg" alt="" width="30%">
      凑字数~凑字数~凑字数凑字数~凑字数~凑字数凑字数~凑字数~凑字数凑字数~凑字数~凑字数凑字数~凑字
      数~凑字数凑字数~凑字数~凑字数凑字数~凑字数~凑字数凑字数~凑字数~凑字数凑字数~凑字数~凑字数凑字数~凑字
      数~凑字数凑字数~凑字数~凑字数凑字数~凑字数~凑字数凑字数~凑字数~凑字数凑字数~凑字数~凑字数凑字数~
      凑字数~凑字数~凑字数凑字数~凑字数~凑字数凑字数~凑字数~凑字数凑字数~凑字数~凑字数凑字数~凑字数
      凑字数~凑字数~凑字数凑字数~凑字数~凑字数凑字数~凑字数~凑字数凑字数~凑字数~凑字数凑字数~凑字数~
      凑字数
    </div>

    <h2>clear 属性被用于控制浮动</h2>
    <p>先看一个foat例子, 基于这个例子展开说明</p>

    <div style="max-width: 700px; border: 1px solid black;">
      <div style="border: 1px solid green;" class="box">好像漂浮起来了(脱离了dom流)</div>
      <section style="border: 1px solid green;"> section 元素实际上是在 div 之后的。然而 div 元素是浮动到左边的，于是 section 中的
        文字就围绕了 div ，并且 section 元素包围了整个元素。如果我们想让 section 显示在浮动元素之后呢？看下面的改进</section>
    </div>
    <div style="max-width: 700px; margin-top: 50px; border: 1px solid black;">
        <div style="border: 1px solid green;" class="box2">好像漂浮起来了(脱离了dom流)</div>
        <section class="after-box" style="border: 1px solid green;"> 使用 clear 我们就可以将这个段落移动到浮动元素 div 下面。你需
          要用 left 值才能清除元素的向左浮动。你还可以用 right 或 both 来清除向右浮动或同时清除向左向右浮动</section>
    </div>

    <h2>克服浮动的缺点</h2>
    <p>有时候元素会溢出到father元素外面</p>

    <div style="border: black solid 1px; max-width: 700px;" >
      <img style="float: right;" src="./timg.jpg" alt="" width="30%">
      <div>这个图片比包含它的元素还高， 而且它是浮动的，于是它就溢出到了容器外面！看下面的解决方案 
      </div>
    </div>
    <div class="clear-fix" style="border: black solid 1px; max-width: 700px; margin-top: 100px;" >
      <img style="float: right;" src="./timg.jpg" alt="" width="30%">
      <div>在father元素上添加 "overflow: auto;", 溢出修复了 
      </div>
    </div>

    <h2>flout布局的demo</h2>
    👉 <a href="./float-layout.html">link</a>
  </div>
  <div class="demo5">
    <h1>百分比宽度</h1>
    <p>百分比是一种相对于包含块的计量单位。它对图片很有用：如下我们实现了图片宽度始终是容器宽度的50%。把页面缩小图片宽度会变化</p>

    <h2>子元素width为50%</h2>
    <article style="border: green 1px solid;" class="clear-fix">
      <img src="./timg.jpg" alt="">
      还能同时使用 min-width 和 max-width 来限制图片的最大或最小宽度！
    </article>

    <h2>float和百分比宽度配合布局</h2>
    <div style="border: 2px solid black;" class="container">
      <nav style="border: 2px solid green">
        <ul>
          <li>link1</li>
          <li>link2</li>
          <li>link3</li>
        </ul>
        宽度会自己个变动
      </nav>
      <section style="border: 2px solid blue;">当布局很窄时， nav 就会被挤扁。</section>
      <section style="border: 2px solid blue;">凑字数--凑字数凑字数--凑字数凑字数--凑字数凑字数--凑字数凑字数--凑字数凑字数--凑字数凑字
        数--凑字数凑字数--凑字数凑字数--凑字数凑字数--凑字数凑字数--凑字数凑字数--凑字数凑字数--凑字数凑字数--凑字数凑字数--凑字数
        凑字数--凑字数凑字数--凑字数凑字数--凑字数凑字数--凑字数凑字数--凑字数凑字数--凑字数凑字数--凑字数凑字数--凑字数凑字数--凑字数
      </section>
    </div>
  </div>
  <div class="demo6">
    <h1>媒体查询</h1>
    <p>响应式设计（Responsive Design” 是一种让网站针对不同的浏览器和设备“呈现”不同显示效果的策略，媒体查询是做此事所需的最强大的工具。</p>

    <h2>媒体查询配合百分比宽度布局</h2>
    <p>让我们使用百分比宽度来布局，然后在浏览器变窄到无法容纳侧边栏中的菜单时，把布局显示成一列</p>
    <p>此外, " meta viewport " 元素会和媒体查询配合使用获得移动设备更好的显示效果</p>
    <div style="border: 1px solid black;" class="container">
      <nav style="border: 2px solid green">
        <ul>
          <li>link1</li>
          <li>link2</li>
          <li>link3</li>
        </ul>
        吧浏览器调整到最窄, li元素会变为一行, 由默认的display:block 变为 "display:inline"
      </nav>
      <section style="border: 2px solid blue;">当你调整浏览器窗口大小时, 这里的内容会显示成一列(没有margin-left:25%;了)</section>
      <section style="border: 2px solid blue;">凑字数--凑字数凑字数--凑字数凑字数--凑字数凑字数--凑字数凑字数--凑字数凑字数--凑字数凑字
        数--凑字数凑字数--凑字数凑字数--凑字数凑字数--凑字数凑字数--凑字数凑字数--凑字数凑字数--凑字数凑字数--凑字数凑字数--凑字数
        凑字数--凑字数凑字数--凑字数凑字数--凑字数凑字数--凑字数凑字数--凑字数凑字数--凑字数凑字数--凑字数凑字数--凑字数凑字数--凑字数
      </section>
    </div>
  </div>
  <div class="demo7">
    <h1>column-xx属性</h1>
    <p>实现文字的多列布局</p>

    <div class="three-column">
        凑字数--凑字数凑字数--凑字数凑字数--凑字数凑字数--凑字数凑字数--凑字数凑字数--凑字数凑字
        数--凑字数凑字数--凑字数凑字数--凑字数凑字数--凑字数凑字数--凑字数凑字数--凑字数凑字数--凑字数凑字数--凑字数凑字数--凑字数
        凑字数--凑字数凑字数--凑字数凑字数--凑字数凑字数--凑字数凑字数--凑字数凑字数--凑字数凑字数--凑字数凑字数--凑字数凑字数--凑字数
    </div>
  </div>
</body>
</html>